<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>功能</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script> 
<style>
/*外框容器*/
.page-wrap{ position: relative;padding-bottom: 50px; width: 100%; height: 100%;overflow: hidden; overflow-y: auto; background: #f3f4f9; display: none;}
/*图片展示*/
.p-img{ width: 100%; padding:10px; background: #fff;overflow: hidden; }
.p-img>div{position: relative; width: 100%; background: #fff; font-size: 14px;   min-height: 150px;   }
.p-img .b-img{position: absolute;z-index:1;top:0;left:0;width: 100%;height: 100%; box-shadow: 0 1px 5px #ccc; border-radius:10px;}
.p-img .r-img{position: absolute;z-index:2;top:30px;left:25px;  width:72px;height:72px; }
.p-img .name{position: absolute;z-index:2;top:35px;left:112px;font:bold 16px '';color:#524e4f;}
.p-img .zhiwu{position:absolute;z-index:2;padding:0 12px;height:18px;line-height:18px;top:60px;left:105px;border-radius:9px;background:#b0bac4;color:#fff;font-size: 14px; }
.p-img .banji{position: absolute;z-index:2;top:80px;left:110px;color:#524e4f;}
.p-img .toggle{position: absolute;z-index:2;top:110px;right:20px;width: 90px;line-height: 19px;border-radius: 10px; background: #fff;font-size: 10px;}
.p-img .toggle-1::after{padding-left:22px;  content: "切换为家长";color:#1b87f3; background: url(../img/af_03.jpg) 6px center no-repeat; background-size: 11px; }
.p-img .toggle-2::after{padding-left:22px;  content: "切换为教师";color:#26af0f; background: url(../img/af2_03.png) 6px center no-repeat; background-size: 11px; }
.p-items{  background: #fff; }
.p-items a{ color: #343434; }
.p-item{padding:0 12px; display: block;width: 100%;height: 43px;border-bottom: 1px solid #f2f2f2; }
.p-item span{margin-left:28px;float: left;line-height: 43px;font-size: 15px;}
.p-item i{float: right;height: 43px;width: 15px;}
/*小图片*/
.bg_1{ background: url(../img/t1_03.jpg) 13px center no-repeat; background-size:15px; }
.bg_2{ background: url(../img/t2_06.jpg) 13px center no-repeat; background-size:15px; }
.bg_3{ background: url(../img/3_08.jpg) 13px center no-repeat; background-size:15px; }
.bg_4{ background: url(../img/t4_10.jpg) 13px center no-repeat; background-size:15px; }
.bg_5{ background: url(../img/t5_12.jpg) 13px center no-repeat; background-size:15px; }
/*箭头*/
.g-left{ background:url(../img/rr_03.png) center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) center no-repeat; background-size: 12px 8px; }
.g-up{ background:url(../img/up_03.png) center no-repeat; background-size: 12px 8px; }

/*底部导航*/
.footer{position:absolute;bottom:0;left:0;height: 50px;width:100%;border-top:1px solid #f2f2f2;background: #fff;
     box-shadow: 1px 0px 50px #cfcfcf; }
.footer a{ float: left;padding-top:28px; width:25%;height:100%;text-align: center;font-size: 13px;  color:#949494;}
.footer .dian{ float:right;width: 7px;height: 7px;border-radius: 50%; background:#eb5740;margin-right:30%;margin-top: -22px; }
/*底部导航图标*/
.foot-xiao{ background:url(../img/xin2_03.png) center 7px no-repeat ; background-size:23px 20px; }
.foot-xiao.active{ background-image:url(../img/xin1_03.png); color: #2fa9fe; background-size:23px 20px;  }
.foot-tong{ background:url(../img/t2_03.png) center 7px no-repeat ; background-size:19px 21px;  }
.foot-tong.active{ background-image:url(../img/t1_03.png); color: #2fa9fe; background-size:19px 21px; }
.foot-gn{ background:url(../img/g2_03.png) center 7px no-repeat ; background-size:20px 20px;  }
.foot-gn.active{ background-image:url(../img/g1_03.png); color: #2fa9fe;background-size:20px 20px; }
.foot-wo{ background:url(../img/r2_03.png) center 7px no-repeat ; background-size:17px 22px;}
.foot-wo.active{ background-image:url(../img/r1_03.png); color: #2fa9fe;background-size:17px 22px; }
</style>
</head>
<body>
<div class="page-wrap" id="page-container">
    <div class="p-img">
         <div>
            <img class="b-img" src="../img/bg/my_03.png" id="b_img">
            <img class="r-img" src="../img/t5.png" >
            <div id="role_tog">
                  <p class="name">赵丽丽</p>
                  <p class="zhiwu">高中部-教师-物理</p>
                  <p class="banji">一班/二班/三班/四班</p>              
            </div>
            <a class="toggle toggle-1"></a>
        </div>
    </div>
    <div class="p-items">
        <a class="p-item bg_1" href="gerenxinxi.html">
           <span>个人信息</span>
           <i class="g-left"></i>
        </a>  
        <a class="p-item bg_2" href="gerenboke.html" id="ge_boke">
           <span>个人博客</span>
           <i class="g-left"></i>
        </a>  
        <a class="p-item bg_3" href="banjikongjian.html">
           <span>班级空间</span>
           <i class="g-left"></i>
        </a>  
        <a class="p-item bg_4" href="wodeshoucang.html">
           <span>我的收藏</span>
           <i class="g-left"></i>
        </a>  
        <a class="p-item bg_5" href="shenfenguanlian.html">
           <span>身份关联</span>
           <i class="g-left"></i>
        </a>       
    </div>
   <!-- 底部导航 -->
  <div class="footer">
    <a class="foot-xiao" href="../xiaoxi/index.html"><i></i>消息</a>
    <a class="foot-tong" href="../tongxunlu/index.html"><i></i>通讯录</a>
    <a class="foot-gn"  href="../gongneng/index.html"><i></i>功能</a>
    <a class="foot-wo active" href="../wode/index.html"><i class="dian"></i>我的</a>
  </div> 
</div>

</body>
<script>
$.showLoading();
$(function(){  
sessionStorage.num1 = 2;
// 家长,教师切换
$(".toggle").click(function(){
    if( $(this).hasClass("toggle-1") ){
          $(this).removeClass("toggle-1").addClass("toggle-2");
          $("#b_img").attr("src","../img/bg/jz_03.png");
          $("#ge_boke").hide();
          $("#role_tog").html(
                  '<p class="name">赵丽丽 妈妈</p>'+
                  '<p class="zhiwu" style="background:#48bc01;color:#fff;">学生家长</p>'+
                  '<p class="banji">高中部-家长-36班</p>'   
           );
          // 本地储存数据
          sessionStorage.num1 = 1;
    }else{
          $(this).removeClass("toggle-2").addClass("toggle-1");
          $("#b_img").attr("src","../img/bg/my_03.png");
          $("#ge_boke").show();
          $("#role_tog").html(
                  '<p class="name">赵丽丽</p>'+
                  '<p class="zhiwu">高中部-教师-物理</p>'+
                  '<p class="banji">一班/二班/三班/四班</p>'   
           );
          // 本地储存数据
          sessionStorage.num1 = 2 ;
    }
  });
    $.hideLoading();
    $("#page-container").show(); 
})
</script>

</html>